<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta content="IE=edge" http-equiv="X-UA-Compatible">
		<meta content="width=device-width, initial-scale=1" name="viewport">
		<title>Bok</title>

		<meta content="博客,个人博客" name="description" />
		<meta content="博客,个人博客" name="keywords" />

		<link href="./log_16_16.ico" rel="icon" type="image/x-icon">
		<link href="./log_16_16.ico" rel="shortcut icon" type="image/x-icon">
		<!-- 最新版本vue -->
		<!--    <script src="http://unpkg.com/vue"></script>-->
		<!-- 最新版本http-vue-loader引入 -->
		<!--    <script src="http://unpkg.com/http-vue-loader"></script>-->
		<!-- 最新版本axios引入 -->
		<!--    <script src="http://unpkg.com/axios"></script>-->
		<!-- 最新版本showdown引入 实现markdown转html -->
		<!--    <script src="http://unpkg.com/showdown"></script>-->
		<!-- 指定版本vue -->
		<script src="./js/vue.js"></script>
		<!-- 指定版本http-vue-loader引入 -->
		<script src="./js/httpVueLoader.js"></script>
		<!-- 指定版本axios引入 -->
		<script src="./js/axios.min.js"></script>
		<!-- 指定版本showdown引入 实现markdown转html -->
		<script src="./js/showdown.min.js"></script>
		<!-- 指定版本showdown-highlight引入 实现markdown转高亮显示 -->
		<script src="./js/highlight.min.js"></script>
		<!-- js复制 https://clipboardjs.com/ -->
		<script src="./js/clipboard.min.js"></script>
		<!-- mammoth.browser.min.js docx转换为html -->
		<script src="./js/mammoth.browser.min.js"></script>
		<!-- xlsx.full.min.js excel转换为html -->
		<script src="./js/xlsx.full.min.js"></script>
		<!-- pdf.min.js pdf转换为html -->
		<script src="./js/pdf.min.js"></script>
		<!-- Bootstrap 核心 CSS 文件 -->
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<!-- lay-ui -->
		<link href="./js/layui-2.8.11/css/layui.css" rel="stylesheet">
		<!-- 指定版本showdown-highlight引入 实现markdown转高亮显示 -->
		<!--    <link href="http://unpkg.com/@highlightjs/cdn-assets@11.3.1/styles/default.min.css" rel="stylesheet">-->
		<link href="./css/monokai-sublime.min.css" rel="stylesheet">
		<!-- Font Awesome图标库 http://www.fontawesome.com.cn/faicons/ -->
		<link href="./css/font-awesome.min.css" rel="stylesheet">
		<!-- <link href="http://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
		<!-- Font Awesome图标库 动画效果 https://l-lin.github.io/font-awesome-animation/ -->
		<link href="./css/font-awesome-animation.min.css" rel="stylesheet">
		<!-- <link href="http://unpkg.com/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css" rel="stylesheet"> -->
		<link href="./css/index.css" rel="stylesheet">
		<style>
			body .ds_layer {
				background-color: rgba(0, 0, 0, 0.4) !important;
			}

			body .ds_layer .layui-layer-content {
				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
			}
		</style>
	</head>
	<body>
		<!-- 该博客copy自：https://yiliashaw.github.io/ -->
		<div id="app">
			<div class="wrap" style="display: block;">
				<nav class="page-navigation">
					<div class="nav-container">
						<div class="page-header-logo">
							<h1 class="prince-log"><a class="home-link" href="?">bok</a></h1>
						</div>
						<button class="navbar-toggle" data-target=".main-nav-items" data-toggle="collapse" type="button">
							<span class="sr-only">切换导航</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<ul aria-expanded="false" class="navbar-collapse main-nav-items collapse" style="height: 1px;list-style: none;">
							<li class="menu-item"><a href="?" target="_self">首页</a></li>
							<li class="menu-item"><a href="?route=archive" target="_self">档案</a></li>
							<li class="menu-item"><a href="?route=about" target="_self">关于</a></li>
						</ul>
					</div>
				</nav>
				<breadcrumb_component :route="route"></breadcrumb_component>
				<main class="prince-container">
					<home_component :fire="fire" :page="page" :route="route" :size="size" v-if="routes.home.test(route)"></home_component>
					<archive_component :fire="fire" :route="route" v-else-if="routes.archive.test(route)"></archive_component>
					<blog_component :fire="fire" :route="route" v-else-if="routes.blog.test(route)"></blog_component>
					<about_component :route="route" v-else-if="routes.about.test(route)"></about_component>
					<tools_component :route="route" v-else-if="routes.tools.test(route)"></tools_component>
					<error_component :route="route" v-else></error_component>
				</main>
			</div>
			<footer>
				<copyright_component></copyright_component>
			</footer>
		</div>

		<!-- lau-ui -->
		<script src="./js/layui-2.8.11/layui.js"></script>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<!--<script src="http://unpkg.com/jquery"></script>-->
		<script src="./js/jquery.min.js"></script>
		<!-- Bootstrap 核心 JavaScript 文件 -->
		<!--<script src="http://unpkg.com/bootstrap"></script>-->
		<script src="./js/bootstrap.min.js"></script>

		<!-- 最新版本组件库引入 -->
		<!--<script src="http://unpkg.com/element-ui"></script>-->
		<!-- 指定版本组件库引入 -->
		<script src="./js/index.js"></script>
		<script src="./js/confetti.browser.min.js"></script>
		<script>
			let access_token = '5fff72f8176cb8c285355f7996e6f36d';
			let basePath = 'https://gitee.com/api/v5/repos/bok/bok/git/trees/master'
			let baseDir = 'blog'
			var blogs = new Array();

			// 设置带有时长的localStorage数据
			function setItemWithExpiry(key, value, ttl) {
				const now = new Date();
				// ttl是过期时间（单位：毫秒）
				const item = {
					value: value,
					expiry: now.getTime() + ttl,
				};
				localStorage.setItem(key, JSON.stringify(item));
			}

			// 获取带有时长的localStorage数据
			function getItemWithExpiry(key) {
				const itemStr = localStorage.getItem(key);
				if (null == itemStr) {
					return null;
				}
				const item = JSON.parse(itemStr);
				const now = new Date();
				if (now.getTime() > item.expiry) {
					localStorage.removeItem(key);
					return null;
				}
				return item.value;
			}


			if (null == window.sessionStorage.getItem('first_open')) {
				// 打赏
				layer.msg(`<div style="text-align: center">
		<p>这里是一段文字</p>
		<p>合理搭配，展示不一样的风格</p>
		<img src="https://gitee.com/zhiqiang94/image-oss/raw/master/images/202111031527084.png" style="margin-top: 15px;width: 198px;height: 198px;">
		<img src="https://gitee.com/zhiqiang94/image-oss/raw/master/images/202111031527084.png" style="margin-top: 15px;width: 198px;height: 198px;">
</div>`, {
					time: -1,
					shade: 0.1,
					skin: 'ds_layer',
					anim: 1,
					scrollbar: false,
					btn: ['关掉它!']
				});
				sessionStorage.setItem('first_open', false);
			}
			// 使用httpVueLoader
			Vue.use(httpVueLoader);
			var app = new Vue({
				el: '#app',
				data() {
					return {
						// 火热阅读数量
						fire: 5,
						routes: {
							home: /^$|^[/]$|^home$|^index$/,
							archive: /^archive$/,
							blog: /^blog$/,
							about: /^about$/,
							tools: /^tools/,
						},
						route: '/home',
						page: 1,
						size: 6,
					}
				},
				created() {
					var blogs_cache = getItemWithExpiry('blogs_cache');
					if (blogs_cache == null) {
						this.loadBlogs()
					} else {
						blogs = JSON.parse(blogs_cache)
					}
					// this.route = decodeURI(window.location.pathname);
					this.route = this.getQueryString('route') || 'home';
					if (window.location.search !== '') {
						this.page = this.getQueryString('page') || 1;
						this.size = this.getQueryString('size') || 3;
					}
				},
				methods: {
					async loadBlogs(path, dir) {
						if (!path) {
							path = basePath
						}
						var response_data = getItemWithExpiry('load_blogs_cache_' + path);
						if (null != response_data) {
							response_data = JSON.parse(response_data)
						} else {
							response = await axios.get(path + '?access_token=' + access_token)
							if (response.status == 200) {
								response_data = response.data;
								setItemWithExpiry('load_blogs_cache_' + path, JSON.stringify(response_data), 10 * 60 * 1000)
							} else {
								layer.msg("服务异常");
								return;
							}
						}
						for (var item of response_data.tree) {
							if (path === basePath) {
								if (item.path === baseDir) {
									this.loadBlogs(item.url, baseDir + '/')
									break
								}
							} else {
								if (item.type === 'blob') {
									blogs.push({
										name: item.path,
										path: dir + item.path
									})
									setItemWithExpiry('blogs_cache', JSON.stringify(blogs), 60 * 60 * 1000)
								} else {
									this.loadBlogs(item.url, dir + item.path + '/')
								}
							}
						}
					},
					getQueryString(name) {
						let reg = `(^|&)${name}=([^&]*)(&|$)`
						let r = decodeURIComponent(window.location.search).substr(1).match(reg);
						if (r != null) return unescape(r[2]);
						return null;
					},
				},
				// 组件
				components: {
					/* 面包屑组件 */
					'breadcrumb_component': 'url:./component/breadcrumb.vue',
					/* 首页组件 */
					'home_component': 'url:./component/home.vue',
					/* 档案组件 */
					'archive_component': 'url:./component/archive.vue',
					/* 博客详情组件 */
					'blog_component': 'url:./component/blog.vue',
					/* 博客详情组件 */
					// 'footer_component': httpVueLoader('/component/copyright.vue'),
					'copyright_component': 'url:./component/copyright.vue',
					/* 博客详情组件 */
					'about_component': 'url:./component/about.vue',
					/* tools组件 */
					'tools_component': 'url:./component/tools.vue',
					/* 404组件 */
					'error_component': 'url:./component/error.vue',
				}
			});
			
			
			/*  https://www.kirilv.com/canvas-confetti/  */
			
			var duration = 15 * 1000;
			var animationEnd = Date.now() + duration;
			var skew = 1;
			
			function randomInRange(min, max) {
			  return Math.random() * (max - min) + min;
			}
			
			(function frame() {
			  var timeLeft = animationEnd - Date.now();
			  var ticks = Math.max(200, 500 * (timeLeft / duration));
			  skew = Math.max(0.8, skew - 0.001);
			
			  confetti({
			    particleCount: 1,
			    startVelocity: 0,
			    ticks: ticks,
			    origin: {
			      x: Math.random(),
			      // since particles fall down, skew start toward the top
			      y: (Math.random() * skew) - 0.2
			    },
			    colors: ['#ffffff'],
			    shapes: ['circle'],
			    gravity: randomInRange(0.4, 0.6),
			    scalar: randomInRange(0.4, 1),
			    drift: randomInRange(-0.4, 0.4)
			  });
			
			  if (timeLeft > 0) {
			    requestAnimationFrame(frame);
			  }
			}());
		</script>
	</body>
</html>
